<template>
  <div class="person">
    <div id="head">我的个人信息</div>
    <div class="personbody">
      <div id="headimg">
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div id="personinfo">
        <el-descriptions class="margin-top" :column="3" size="medium" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user-solid"></i>姓名
            </template>
            {{logininfo.UserName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-female"></i>性别
            </template>
            {{logininfo.Sex}}
          </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-date"></i>生日
            </template>
            {{logininfo.Birthday}}
          </el-descriptions-item>
           <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>工号
            </template>
            {{logininfo.UserGH}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-lock"></i>密码
            </template>
            <el-input v-model="logininfo.PassWord" show-password :class="inputflag?'':'text'" ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-message"></i>邮箱
            </template>
            <el-input v-model="logininfo.Email" :class="inputflag?'':'text'" :disabled="inputflag"></el-input>
           
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>职位
            </template>
            {{logininfo.Position}}
          </el-descriptions-item>
           <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>身份证号
            </template>
            {{logininfo.IdCard}}
          </el-descriptions-item> 
         
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>手机号              
            </template>
            <el-input v-model="logininfo.Telephone" :class="inputflag?'':'text'" :disabled="inputflag"></el-input>
             
          </el-descriptions-item>
              <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>部门
            </template>
            {{logininfo.Department}}
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>家庭住址
            </template>
             <el-input v-model="logininfo.Address" :class="inputflag?'':'text'" :disabled="inputflag"></el-input>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="div">
        <el-button type="primary"  @click="inputflag=false">修改个人信息</el-button>
        <el-button type="primary" @click="changeuser">确定</el-button>
     </div>
  </div>
</template>

<script>
import { getTextBoundingRect } from 'echarts/lib/util/format';
import { mapState } from 'vuex';
export default {
     data() {
      return {
        imageUrl: '',
        pic:'',
        inputflag:true,//表单节流阀
      };
    },
    computed:{
      //引入vuex里的数据
      ...mapState(['logininfo'])
    },
    
    created(){
      this.logininfo.Birthday=this.logininfo.Birthday.slice(0,10)
      this.imageUrl=this.logininfo.UserPic;
    },
    methods:{
      changeuser(){
        console.log(this.logininfo.Telephone);
        var obj={};
        obj.phone=this.logininfo.Telephone
        obj.pwd=this.logininfo.PassWord;
        obj.email=this.logininfo.Email;
        obj.address=this.logininfo.Address;
        obj.UserGH=this.logininfo.UserGH;
        obj.pic=this.pic;
        // obj.pic=this.imageUrl;

        this.$axios({
          method:'post',
          url:'/changeself',
          data:obj
        }).then(function(res){
          console.log(res);
        })
      },
      handleAvatarSuccess(res, file) {//上传成功函数赋值
        this.imageUrl = URL.createObjectURL(file.raw);
        this.pic=file.raw.name
      },
      beforeAvatarUpload(file) {//图片上传前判断
        // console.log(file.type);//图片的类型
        const isJPG = file.type.includes('image');
        const isLt10M = file.size / 1024 / 1024 < 10;
        // console.log( isJPG,isLt10M);
        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        if (!isLt10M) {
          this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        return isJPG && isLt10M;
      }
    },
    
}
</script>

<style>
.person {
  width: 100%;
}

.person #head {
  text-align: center;
  height: 50px;
  line-height: 50px;
  background: #C3DDE0;
  font-size: 20px;
  border-radius: 5px 5px 0 0;

}
.person .div{
  margin: 20px;
}
.person .div>.el-button{
  margin-left:50px;
}
.personbody {
  width: 100%;
  display: flex;
}

#headimg {
  width: 16%;
}

#personinfo {
  width: 84%;
  border-radius: 0 0 5px 0;
}
/* 上次头像样式 */
.avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
     border-radius: 0 0 0 5px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 197px;
    height: 279px;
    line-height: 270px;
    text-align: center;
    
}
  .avatar {
    width: 197px;
    height: 279px;
    display: block;
    padding: 41px 0px;
   
}

  /* 表格样式 */
 #personinfo .el-descriptions-row{
  height: 70px;
 }
 .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
    padding: 10px;
    font-size: 18px;
}

#personinfo .el-input__inner {
    border: none;
    background: #fff;
    color: #8c939d;
    font-size: 18px;
}
 #personinfo .text{
  border: 1px solid #BBDEE1;
  border-radius: 5px;
 }
 .border{
  outline: 1px solid ;
 }
 .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 197px;
    height: 277px;
    line-height: 270px;
    text-align: center;
    
}
 
</style>